<template>
    <div class="game1B">
        <audio id="errorSound"
            src="https://ziyuan.windbless.top/sounds/lakk/%E5%BE%88%E6%8A%B1%E6%AD%89%EF%BC%8C%E9%80%89%E6%8B%A9%E9%94%99%E8%AF%AF%EF%BC%8C%E8%AF%B7%E5%86%8D%E6%AC%A1%E9%80%89%E6%8B%A9%E3%80%82.mp3"></audio>

        <div @click="chooseimg(index)" class="choiceitem" v-for="(item, index) in props.imgSrc" :key="item">
            <img :src="`${config.Target}${item}`" alt="">
            <div class="itemoption"> {{ index + 1 }}</div>

        </div>
    </div>
</template>

<script setup>
import api from '@/api/user.js'
import { useAuthStore } from '@/store/index.ts'
const store = useAuthStore();
import config from '@/config/config.js'
import { ref, onMounted, defineProps,defineEmits } from 'vue';
const emits = defineEmits(['next']);
import { message } from 'ant-design-vue';
const num = ref(0);
// Define props
const props = defineProps({
    imgSrc: {
        type: Array,
        required: true
    },
    correctanswer: {
        type: String,
        required: true
    }
});
const playaudio = () => {
    const errorSound = document.getElementById('errorSound');
    errorSound.play();
    message.error("选择错误")
    console.log("error");
}
// Define choiceItems
const choiceItems = ref([{
    url: new URL('@/static/dog.jpg', import.meta.url).href,
    option: "A"
}, {
    url: new URL('@/static/dog.jpg', import.meta.url).href,
    option: "B"
}, {
    url: new URL('@/static/dog.jpg', import.meta.url).href,
    option: "C"
},
]);

onMounted(() => {
});
const chooseimg = (x) => {
    console.log(props.imgSrc[x] == props.correctanswer);
    console.log(store.roomid);
    api.addroom({
        key: store.roomid,
        "B1": props.imgSrc[x]
    }).then((res) => {
    })
    num.value++;
    if (props.imgSrc[x] == props.correctanswer) {
     
            emits('next', num.value);
       
    } else {
        playaudio();
    }
}

</script>

<style lang="scss" scoped>
.game1B {
    background-color: antiquewhite;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 2rem;
    border: #f5ca8e solid 1rem;
    display: flex;
    padding: 1rem;
    gap: 2rem;

    .choiceitem {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .itemoption {
            font-size: 4rem;
        }

        img {
            width: 100%;
        }
    }
}
</style>